<script setup>
import { ref, computed, reactive, onMounted } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { getyufaApi } from '/api/request.js';
const props = defineProps({});
const platform = ref({});
const list = ref(null);
const query = ref({
    pid: '',
    index: 0
});
const deeps = (obj) => {
    for (let i in obj) {
        obj[i].image = `http://zhangyu.aizhangyu.cn${obj[i].image}`;
        if (obj[i].second_classify && obj[i].second_classify.length) {
            deeps(obj[i].second_classify);
        }
    }
};
onShow(async () => {
    platform.value = uni.getStorageSync('platform');
    let res = await getyufaApi();
    list.value = res.data;
    deeps(list.value);
});
const goback = () => {
    uni.navigateBack();
};
const showPage = (title, id) => {
    uni.navigateTo({
        url: '/pages/user/components/yufa/xinde?title=' + title + '&id=' + id,
        fail(e) {
            console.log(e);
        }
    });
};
</script>

<template>
    <view
        class="wrap uni-col"
        :style="{
            height: platform.gaodu + 'rpx'
        }"
    >
        <view
            class="header-wrap uni-row"
            :style="{
                paddingTop: platform.dingbu + 'rpx',
                height: platform.dingbu + 96 + 'rpx'
            }"
        >
            <image
                class="left"
                src="/static/img/goback-black.png"
                @click="goback"
                mode="widthFix"
            />
            <view class="title"> 语法训练 </view>
            <image
                style="opacity: 0"
                class="left"
                src="/static/img/goback-black.png"
                @click="goback"
                mode="widthFix"
            />
        </view>
        <scroll-view scroll-y="true" style="flex: 1">
            <view class="body" v-if="list && list.length">
                <view
                    class="item uni-row"
                    v-for="(item, index) in list"
                    :key="index"
                    @click="showPage(item.name, item.id)"
                >
                    <view class="left uni-row">
                        <image :src="item.image" class="icon"></image>
                        <view class="danci">
                            {{ item.name }}
                        </view>
                    </view>
                </view>
            </view>
            <view class="nothing" v-if="list && list[query.index].second_classify.length < 1">
                <image src="/static/img/nothing.png" class="img"></image>
                <view class="label"> 哎呀，这里什么内容都没有 </view>
            </view>
        </scroll-view>
    </view>
</template>

<style scoped lang="less">
.wrap {
    background: url('/static/img/wolrd/bg.png');
    background-size: 100% 100%;

    .header-wrap {
        justify-content: space-between;
        padding-left: 24rpx;
        padding-right: 24rpx;

        .left {
            width: 48rpx;
        }

        .title {
            font-weight: 500;
            font-size: 32rpx;
            color: #333333;
        }
    }

    .sele-wrap {
        padding: 0 28rpx;
        justify-content: space-between;

        .item {
            width: 225rpx;
            height: 164rpx;
            border-radius: 20rpx;
            background-size: 100% 100%;
            padding: 20rpx 0 0 16rpx;
            transition: 0.3s all;

            &.active {
                border: 3rpx solid #9561f3;
            }

            .text {
                font-weight: 500;
                font-size: 28rpx;
                color: #333333;
            }
        }
    }

    .body {
        margin-top: 20rpx;
        padding: 0 28rpx 40rpx;

        .item {
            justify-content: space-between;
            padding: 0 20rpx;
            height: 140rpx;
            background: #ffffff;
            border-radius: 16rpx;
            margin-bottom: 16rpx;

            .left {
                .icon {
                    width: 100rpx;
                    height: 100rpx;
                    margin-right: 24rpx;
                    border-radius: 16rpx;
                }

                .danci {
                    font-size: 32rpx;
                    color: #333333;
                }
            }
        }
    }
}
</style>
